<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg 
        id="container-svg"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
    ></svg>
    <script>
        const data = [
            {name: 'questions',value: 17},
            {name: 'schools',value: 25},
            {name: 'philosophers',value: 35},
        ]
        const chartWidth = 480;
        const chartHeight = 300;
        const margin = 15;
        const containerWidth = chartWidth + margin * 2;
        const containerHeight = chartHeight + margin * 2;

        const names = Array.from(data,(d) => d.name);
        const values = Array.from(data,(d) => d.value);
        const indices = Array.from(data,(_,i) => i);

        const step = chartWidth / names.length
        const barWidth = step * 0.8
        const xs = Array.from(indices,(i) => i * step)
        
        const y = chartHeight;
        const vmax = Math.max(...values);
        const barheights = Array.from(values,(v) => chartHeight * (v / vmax))
        const nameColor = {
            questions: "#5b8ff9",
            philosophers: "#61ddaa",
            schools: "#65789b"
        }
        const colors = Array.from(names, (name) => nameColor[name]);
        function createSVGElement(type) {
            return document.createElementNS(
                "http://www.w3.org/2000/svg",
                type
            )
        }

        const svg = document.getElementById('container-svg');
        svg.setAttribute('width',containerWidth)
        svg.setAttribute('height',containerHeight)
        svg.setAttribute('viewBox', [0,0,containerWidth,containerHeight])

        const g = createSVGElement('g');
        g.setAttribute("transform",`translate(${margin},${margin})`)
        svg.appendChild(g);

        for(const index of indices) {
            const color = colors[index];
            const x= xs[index];
            const barHeight = barheights[index];
            const value = values[index]

            const rect = createSVGElement('rect')
            rect.setAttribute("x",x)
            rect.setAttribute("y",y - barHeight)
            rect.setAttribute("fill",color)
            rect.setAttribute('width',barWidth)
            rect.setAttribute('height',barHeight)
            g.appendChild(rect)

            const  text = createSVGElement('text')
            text.textContent = value;
            text.setAttribute("text-anchor",'middle')
            text.setAttribute("fill",'white')
            text.setAttribute("font-family",'PingFangSC-Regular,sans-serif')
            text.setAttribute("font-size",25)
            text.setAttribute("alignment-baseline",'middle')
            text.setAttribute("x",x + barWidth / 2)
            text.setAttribute("y",y - barHeight / 2)
            g.appendChild(text)

        }
    </script>
</body>
</html>